<template>
  <div>
    <van-nav-bar title="绑定身份证" left-arrow @click-left="$router.push('/bindcard')" />
    <div class="idcard">
      <div class="idcardbg" style="position: relative">
        <img v-if="imgSrc" :src="imgSrc || ''" alt="" style="width: 100%; height: 100%" />
        <div style="position: absolute; top: 53px; left: 102px">
          <van-uploader :after-read="afterRead" />
        </div>
      </div>
    </div>
    <div class="monerycard">
      <div class="monerycardbg" style="position: relative">
        <img v-if="imgSrc1" :src="imgSrc1 || ''" alt="" style="width: 100%; height: 100%" />
        <div style="position: absolute; top: 53px; left: 102px">
          <van-uploader :after-read="afterRead1" />
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <van-button type="primary" @click="bindDoctorIdCard1">确定</van-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { bindDoctorIdCard } from '@/api/wallet'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { JSEncrypt } from 'jsencrypt'
import { useRouter } from 'vue-router'
const crypt = new JSEncrypt()
const publicKey =
  'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
crypt.setPublicKey(publicKey)
const imgSrc = ref()
const imgSrc1 = ref()
const router = useRouter()
const afterRead = (file:any) => {
  // 此时可以自行将文件上传至服务器
  console.log(file)
  imgSrc.value = file.objectUrl
}
const afterRead1 = (file:any) => {
  // 此时可以自行将文件上传至服务器
  console.log(file)
  imgSrc1.value = file.objectUrl
}
const doctorId = ref(parseInt(localStorage.getItem('doctorId')||''))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId')||''))
const bindDoctorIdCard1 = async () => {
  const res = await bindDoctorIdCard(doctorId.value, sessionId.value, {
    doctorId: doctorId.value,
    name: crypt.encrypt('张寒路'),
    sex: crypt.encrypt('男'),
    nation: crypt.encrypt('汉族'),
    birthday: crypt.encrypt('九月二十七'),
    address: crypt.encrypt('河南省南阳市邓州市'),
    idNumber: crypt.encrypt('4110110110110110'),
    issueOffice: crypt.encrypt('邓州市市政府')
  })
  console.log(res)
}
</script>
<style lang="scss">
.idcard {
  width: 100vw;
  height: 40vh;
  padding: 25px;
  h3 {
    width: 45px;
    border-bottom: 3px solid skyblue;
  }
  .idcardbg {
    margin-top: 10px;
    width: 300px;
    height: 200px;
    background: url('../../images-wd/image/hdpi/id_card_front.png') no-repeat;
    background-size: 100%;
    .idtitle {
      font-size: 14px;
      color: skyblue;
      text-align: center;
      line-height: 200px;
    }
  }
}
.monerycard {
  width: 100vw;
  height: 40vh;
  padding: 25px;
  h3 {
    width: 45px;
    border-bottom: 3px solid skyblue;
  }
  .monerycardbg {
    margin-top: 10px;
    width: 300px;
    height: 200px;
    background: url('../../images-wd/image/hdpi/id_card_back.png') no-repeat;
    background-size: 100%;
    .monerytitle {
      font-size: 14px;
      color: skyblue;
      text-align: center;
      line-height: 200px;
    }
  }
}
.bottitle {
  color: skyblue;
  text-align: center;
  margin-top: 20px;
}
</style>